<!--
 * @Author: your name
 * @Date: 2020-12-31 11:15:50
 * @LastEditTime: 2021-01-04 00:21:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\H5 2010 练习\第三阶段 Vue + node\DAY 7\panda\src\views\login\index.vue
-->
<template>
<div id="login">
  <van-form @submit="onSubmit">
    <van-field
      v-model="username"
      name="username"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <van-field name="remember">
      <template #input>
        <van-checkbox v-model="remember">记住用户</van-checkbox>
      </template>
    </van-field>
    <div style="margin: 16px;">
      <van-button
        round
        block
        type="info"
        native-type="submit"
      >登录</van-button>
    </div>
  </van-form>
</div>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'login',
  data() {
    return {
      username: 'test',
      password: '123456',
      remember: false
    }
  },
  methods: {
    onSubmit(values) {
      // console.log('submit', values)
      // 登录，处理用户登录状态信息
      const result = this.$store.dispatch('user/loginAsync', values)
      // console.log('调用 action 后的返回：', result)
      // 登陆成功后，跳转到个人中心页面
      result.then(status => {
        if (status.success) { // 登陆成功
          Toast.success(
            {
              message: '登陆成功',
              duration: 600
            }
          )
          // this.$router.push('/mine')
          // 向真实来登录页面前的页面跳转
          console.log(this.$route)
          const { realRoute = '/mine' } = this.$route.params
          this.$router.push(realRoute)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
